<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    :pagination="pagination"
    @change="handleTableChange"
  />
</template>
<script setup>
import { ref, computed, reactive } from "vue";
import { getRecordList } from "@/api/user.js";
import { message } from "ant-design-vue";
import dayjs from "dayjs";
const dataSource = ref([]);
let state = reactive({
  total: 0,
  current: 1,
  pageSize: 4,
});
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "登录时间",
    dataIndex: "login_time",
    key: "login_time",
  },
  {
    title: "登录ip",
    dataIndex: "login_ip",
    key: "login_ip",
  },
  {
    title: "操作系统",
    dataIndex: "login_os",
    key: "login_os",
  },
  {
    title: "浏览器",
    dataIndex: "login_browser",
    key: "login_browser",
  },
  {
    title: "浏览器版本",
    dataIndex: "login_browserVersion",
    key: "login_browserVersion",
  },
];
const getData = async () => {
  let res = await getRecordList();
  if (res && res.status === 200) {
    const { page, pageSize, total, data } = res;
    state.current = page;
    state.pageSize = pageSize;
    state.total = total;
    dataSource.value = data.map((item) => {
      return {
        ...item,
        login_time: dayjs(item.login_time).format("YYYY-MM-DD HH:mm:ss"),
      };
    });
  } else {
    message.error(res.data);
  }
};
// 分页
const pagination = computed(() => ({
  total: state.total,
  current: state.current,
  pageSize: state.pageSize,
  showTotal: (total) => `总共 ${total} 项`,
  defaultPageSize: 10,
  pageSizeOptions: ["5", "10", "15", "20"], // 可不设置使用默认
}));
// 点击分页
const handleTableChange = (pag, filters, sorter) => {
  state.current = pag.current;
  state.pageSize = pag.pageSize;
  getData({ page: state.current, pageSize: state.pageSize });
};
getData();
</script>
